<script setup>
import Aside from './aside.vue'

</script>
<template>
  <div class="layout">
    <el-container>
      <el-header class="layout-header">
        Docker镜像辅助工具管理系统
      </el-header>
      <el-container class="layout-container">
        <el-aside class="layout-aside" width="200px">
          <Aside />
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
      <el-footer class="layout-footer">
        版本：1.0.0
        <br>
        2025.03.20
      </el-footer>
    </el-container>
  </div>
</template>

<style scoped>
.layout {
  width: 100vw;
  height: 100vh;
  background-color: #00364d;
  color: #ffffff;
}

.layout-container {
  height: calc(100vh - 120px);
}

.layout-header {
  font-size: 30px;
  text-align: center;
  line-height: 60px;
  align-items: center;
  background-color: #00464d;
}

.layout-footer {
  background-color: #00464d;
  text-align: center;
  line-height: 30px;
}

.layout-aside {
  background-color: #00363d;
}

.text-large {
  color: #ffffff;
}

.el-page-header {
  margin: 0 0 20px 0;
}
</style>